<template>
    <div class="transfer-goods page">
        <div class="con">
            <div class="stores">
                <div class="item border-bottom-1px" v-for="(store,index) in storeList"
                     :key="index">
                    <img :src="imgH+store.goods.img" alt="" class="img">
                    <div class="info" @click="selectItem(index)">
                        <span class="name">{{store.goods.name}}</span>
                        <span class="quantity">库存:{{store.store.quantity}}</span>
                    </div>
                    <div class="active" v-if="store.goods.name&&store.goods.name.indexOf('课程')>-1" @click="active(store.store.id,store.goods.profit)">激活</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import txtInput from '@/components/base/txt-input'
    import numInput from '@/components/base/num-input'
    import {list} from "@/api/store";
    import addr from '@/components/addr'
    import {getAddress} from "@/api/order";
    import {active} from "@/api/course";

    export default {
        name: "goods",
        activated() {
            list().then(res => {
                this.stores = res.data
            })
            //显示地址
            // if (this.$route.query.addressId) {
            //     getAddress(this.$route.query.addressId).then(res => {
            //         this.tem.address = res.data
            //     })
            // } else {//初始化数据
            //     this.tem.user.name = this.$route.query.name
            //     this.tem.user.code = this.$route.query.code
            //     this.tem.user.id = this.$route.query.userId
            //     this.tem.remark = ''
            //     this.edit = false
            //     list().then(res => {
            //         this.stores = res.data
            //     })
            // }
        },
        computed: {
            storeList(){
             return  this.stores.filter(store=>{
                  return store.store.quantity>0
              })
            },
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            }
        },
        components: {
            numInput, txtInput, addr
        },
        watch: {

        },
        methods: {
            showAlert(storeId,profit) {
                this.dialog = this.$createDialog({
                    type: 'confirm',
                    icon: 'cubeic-alert',
                    title: '确定激活吗',
                    content: `激活将会扣除${profit}元场地、物资等杂费`,
                    prompt: {
                        value: '',
                        placeholder: '请输入'
                    },
                    confirmBtn: {
                        text: '确定',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    cancelBtn: {
                        text: '取消',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    onConfirm: (e, promptValue) => {
                       active(storeId).then(res=>{
                           this.$createToast({
                               type: 'correct',
                               time: 1000,
                               txt: `激活成功`
                           }).show()
                           this.$router.push("/card")
                       })

                    },
                    onCancel: () => {
                        // this.$createToast({
                        //     type: 'warn',
                        //     time: 1000,
                        //     txt: '点击取消按钮'
                        // }).show()
                    }
                }).show()
            },
            active(id,profit){

                this.showAlert(id,profit)
            },
            selectItem(index) {

            }
        },
        data() {
            return {
                tem: {
                    user: {},
                    mallOrder: {
                        items: []
                    },
                    remark: null,
                    address: null
                },
                edit: false,
                showAddress: null,
                stores: []
            }
        }
    }
</script>

<style scoped lang="stylus">
    .transfer-goods
        background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto
        z-index 2
        height 100%

        .con
            padding 10px 10px 0

            .header
                border-radius 5px
                background-color white
                display flex
                justify-content space-between
                padding 0 15px
                height 44px
                align-items center

                .left
                    height 100%
                    display flex
                    align-items center

                    .name
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: rgba(111, 111, 111, 1);

                    .right
                        color #A1A1A1
                        margin-left 5px
                        font-size 10px

                .right
                    height 100%
                    display flex
                    align-items center
                    font-size 14px
                    color #A1A1A1

                    .line
                        font-size 14px
                        margin 0 10px
                        color #A1A1A1

                    .edit
                        &.selected
                            color #F7895E

                    .reset
                        &.selected
                            color #F7895E

            .stores
                background-color white
                margin-top 10px
                border-radius 5px
                overflow hidden

                .item
                    position relative
                    border-bottom-color #DCDCDC
                    height 80px
                    display flex
                    align-items center

                    .iconfont
                        font-size 18px
                        color #F7895E
                        position absolute
                        right 30px
                        top 30px

                    .img
                        width 50px
                        height 50px
                        border-radius 5px
                        margin 0 15px
                        flex 0 0 50px

                    .info
                        flex 1
                        display flex
                        flex-direction column
                        height 50px

                        .name
                            text-wrap none
                            text-overflow ellipsis
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(78, 61, 7, 1);
                            margin 5px 0px 10px

                        .quantity
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(161, 161, 161, 1);
                    .active
                        font-size 12px
                        width 40px
                        color  red




</style>